<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #banner {
      width: 500px;
      margin: 20px auto;
      height: 400px;
      position: relative;
    }

    #banner .banner_wrap {
      width: 500px;
      height: 400px;
    }

    #banner .banner_wrap>div {
      width: 500px;
      height: 400px;
      display: none;
    }

    #banner .banner_wrap>div:nth-child(1) {
      display: block;
    }

    #banner .banner_wrap div img {
      width: 500px;
      height: 400px;
    }

    .banner_nav {
      list-style: none;
      width: 200px;
      height: 30px;
      /* background: blue; */
      position: absolute;
      bottom: 30px;
      left: 50%;
      margin-left: -100px;
      display: flex;
      justify-content: space-around;
    }

    .banner_nav li {
      width: 30px;
      height: 30px;
      background: deeppink;
      border-radius: 50%;
      cursor: pointer;
    }

    .banner_nav .active {
      background: deepskyblue;
    }

    .banner_ctrl span {
      position: absolute;
      font-size: 50px;
      font-family: "黑体";
      background: rgba(0, 0, 0, 0.5);
      color: white;
      top: 40%;
      cursor: pointer;
    }

    .banner_ctrl .prev {
      left: 30px;
    }

    .banner_ctrl .next {
      right: 30px;
    }
  </style>
</head>

<body>
  <div id="banner">
    <!-- 图片部分 -->
    <div class="banner_wrap">
      <div>
        <img src="./images/1.png" alt="">
      </div>
      <div>
        <img src="./images/2.png" alt="">
      </div>
      <div>
        <img src="./images/3.png" alt="">
      </div>
      <div>
        <img src="./images/4.png" alt="">
      </div>
    </div>
    <!-- 圆点部分 -->
    <ul class="banner_nav">
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <!-- 按钮部分 -->
    <div class="banner_ctrl">
      <span class="prev">&lt;</span>
      <span class="next">&gt;</span>
    </div>
  </div>



  <script src="./jquery-3.4.1.min.js"></script>
  <script>

    var num = 0;//轮播图的公共下标
    var divs = document.querySelectorAll(".banner_wrap>div")
    var lis = document.querySelectorAll(".banner_nav li");
    function move() { //自动轮播
      num++;
      if (num > divs.length - 1) {
        num = 0;
      }
      change()
    }
    var timer = null;
    timer = setInterval(function () {
      move()
    }, 2000)

    // 移入停止轮播 移出继续轮播
    var banner = document.getElementById("banner");
    banner.onmouseenter = function () {
      clearInterval(timer)
    }
    banner.onmouseleave = function () {
      timer = setInterval(function () {
        move()
      }, 2000)
    }
    // 后按钮点击事件
    var next = document.querySelector(".next");
    next.onclick = function () {
      move()
    }
    // 前按钮点击
    var prev = document.querySelector(".prev");
    prev.onclick = function () {
      num--;
      if (num < 0) {
        num = divs.length - 1;
      }
      change()
    }
    // 圆点切换事件
    for (let i = 0; i < lis.length; i++) {
      lis[i].onclick = function () {
        num = i;//当前点击的下标 赋值给公共轮播下标
        change()
      }
    }
    // 切换函数
    function change() {
      // 所有的div隐藏 所有的li去除active的class 
      for (var i = 0; i < divs.length; i++) {
        divs[i].style.display = "none";
        lis[i].className = ""
      }
      // 当前下标div 显示 当前下标的li加上active的class
      divs[num].style.display = "block"
      lis[num].className = "active";
    }








  </script>
</body>

</html>